<template>
  <div>
    <div>
      <el-descriptions border style="margin-top: 10px">
        <el-descriptions-item>
          <template slot="label">
            后台账号
          </template>
          <el-input v-model="bAccount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            后台密码
          </template>
          <el-input v-model="bPassword" type="password" show-password></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>操作设置</span>
        <el-button
            style="float: right;padding: 3px 0"
            type="text"
            @click="addMarkUpFilterTemplate()"
        >
          添加筛选模板
        </el-button>
      </div>
      <div style="margin: 20px 0">

        <div>
          <span class="label">优化选项 : </span>
          <el-checkbox-group
              v-model="options.selectUpdate"
              style="display: inline-block"
              @change="updateChange"
          >
            <el-checkbox v-for="update in options.update" :label="update" :key="update">{{update}}</el-checkbox>
          </el-checkbox-group>
        </div>

        <div>
          <el-divider>关键词出价阈值 [ {{bidScope[0]}} ~ {{bidScope[1]}} ]</el-divider>
          <div class="container">

            <div class="left">
              <el-tooltip content="最低关键词出价" placement="top">
                <el-input-number v-model="bidScope[0]"></el-input-number>
              </el-tooltip>
            </div>

            <div class="right">
              <el-tooltip content="最高关键词出价" placement="top">
                <el-input-number v-model="bidScope[1]"></el-input-number>
              </el-tooltip>
            </div>
          </div>

        </div>

        <div>
          <el-divider>人群溢价百分比阈值 [ {{premiumScope[0]}} ~ {{premiumScope[1]}} ]</el-divider>
          <div class="container">
            <div class="left">
              <el-tooltip content="最低溢价百分比" placement="top">
                <el-input-number v-model="premiumScope[0]"></el-input-number>
              </el-tooltip>
            </div>
            <div class="right">
              <el-tooltip content="最高溢价百分比" placement="top">
                <el-input-number v-model="premiumScope[1]"></el-input-number>
              </el-tooltip>
            </div>
          </div>
        </div>

      </div>
      <div v-for="(item,index) in markTemplateList">
        <el-divider v-if="index > 0"></el-divider>
        <!--头部 删除该模板 添加筛选条件按钮 每个周期的操作百分比-->
        <div style="margin-top: 10px">
          <span style="font-size: 17px;margin-left: 10px;font-weight: bold">周期操作百分比</span>
          <div style="display: inline-block;float: right;margin-right: 10px">
            <el-button type="primary" size="mini" @click="deleteFilterTemplate(markTemplateList,index)">删除该模板
            </el-button>
            <el-button type="success" size="mini" @click="addFilterComparatorItem(markTemplateList,index)">添加筛选条件
            </el-button>
          </div>
        </div>
        <el-descriptions :column="4" border style="margin-top: 10px">
          <el-descriptions-item>
            <template slot="label">
              近7天
            </template>
            <el-input-number
                size="mini"
                :min=-100
                :max=100
                v-model="item['cycleAdjustPercentage'][0]"
                :step="1">
            </el-input-number>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              近14天
            </template>
            <el-input-number
                size="mini"
                :min=-100
                :max=100
                v-model="item['cycleAdjustPercentage'][1]"
                :step="1">
            </el-input-number>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              近30天
            </template>
            <el-input-number
                size="mini"
                :min=-100
                :max=100
                v-model="item['cycleAdjustPercentage'][2]"
                :step="1">
            </el-input-number>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              近90天
            </template>
            <el-input-number
                size="mini"
                :min=-100
                :max=100
                v-model="item['cycleAdjustPercentage'][3]"
                :step="1">
            </el-input-number>
          </el-descriptions-item>
        </el-descriptions>
        <!--筛选条件-->
        <div>
          <div style="margin-top: 10px" v-for="(item2,index2) in item.filterList">
            <el-row :gutter="10">
              <el-col :span="7">
                <el-select v-model="item2.field" placeholder="请选择数据字段">
                  <el-option
                      v-for="(item3,index3) in options.filterField"
                      :key="item3.value"
                      :label="item3.label"
                      :value="item3.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <el-select v-model="item2.comparator" placeholder="请选择比较符号">
                  <el-option
                      v-for="i in options.filterComparator"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <el-input v-model="item2.value" placeholder="请输入值"></el-input>
              </el-col>
              <el-col :span="3">
                <el-button type="danger" icon="el-icon-delete" circle
                           @click="deleteFilterComparatorItem(markTemplateList,index,index2)"></el-button>
              </el-col>
            </el-row>

          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {isNull} from "@/utils/service";
import msg from "@/utils/message"

export default {
  name: "am-ztc-yh",
  props: {
    params: {
      type: Object,
      required: true
    }
  },
  watch: {
    'params': {
      handler(val) {
        this.initParam({...this.params})
      }
    }
  },
  created() {
    this.initParam({...this.params})
  },
  data() {
    return {
      /* 后台账号 */
      bAccount: '',
      /* 后台密码 */
      bPassword: '',
      /* 筛选模板 */
      markTemplateList: [],
      /* 关键词出价区间 */
      bidScope: [0.05, 99.9],
      /* 人群溢价区间 */
      premiumScope: [5, 300],
      /* 是否修改关键词 */
      isUpdateGjc: true,
      /* 是否修改人群 */
      isUpdateRq: true,
      options: {
        filterField: [
          {value: '点击量', label: '点击量'},
          {value: '展现量', label: '展现量'},
          {value: '点击率', label: '点击率'},
          {value: '总成交笔数', label: '总成交笔数'},
          {value: '总ROI', label: '总ROI'},
          {value: '总收藏加购成本', label: '总收藏加购成本'},
        ],
        filterComparator: [
          {value: '大于等于', label: '大于等于'},
          {value: '等于', label: '等于'},
          {value: '大于', label: '大于'},
          {value: '小于', label: '小于'},
          {value: '小于等于', label: '小于等于'},
          {value: '不等', label: '不等'},
        ],
        update: [
          '关键词出价', '人群溢价'
        ],
        selectUpdate: ['关键词出价', '人群溢价']
      }
    }
  },
  methods: {
    isNull: isNull,
    initParam({
                bAccount = '', bPassword = '', markTemplateList = [],
                bidScope = [0.05, 99.9], premiumScope = [5, 300],
                isUpdateGjc = true, isUpdateRq = true
              }) {
      let _t = this;
      markTemplateList.forEach(item => {
        if (_t.isNull(item.cycleAdjustPercentage)) {
          item.cycleAdjustPercentage = [0, 0, 0, 0]
        }
      })
      this.markTemplateList = markTemplateList
      this.bAccount = bAccount
      this.bPassword = bPassword
      this.bidScope = bidScope
      this.premiumScope = premiumScope
      this.isUpdateGjc = isUpdateGjc
      this.isUpdateRq = isUpdateRq

      this.options.selectUpdate = []
      if (isUpdateGjc) {
        this.options.selectUpdate.push("关键词出价")
      }
      if(isUpdateRq){
        this.options.selectUpdate.push("人群溢价")
      }
    },
    /* 添加加价筛选模板 */
    addMarkUpFilterTemplate() {
      this.markTemplateList.push({
        cycleAdjustPercentage: [0, 0, 0, 0],
        /*筛选条件 {field:'',comparator:'',value: ''}*/
        filterList: [{field: '', comparator: '', value: ''}]
      });
    },
    /* 删除筛选模板 */
    deleteFilterTemplate(list, index) {
      list.splice(index, 1);
    },
    /* 添加筛选条件 */
    addFilterComparatorItem(list, index) {
      list[index].filterList.push({field: '', comparator: '', value: ''})
    },
    /* 删除筛选条件 */
    deleteFilterComparatorItem(list, pIndex, sIndex) {
      list[pIndex].filterList.splice(sIndex, 1)
    },
    getParam() {
      let _t = this;
      return {
        markTemplateList: _t.markTemplateList,
        bAccount: _t.bAccount,
        bPassword: _t.bPassword,
        bidScope: _t.bidScope,
        premiumScope: _t.premiumScope,
        isUpdateGjc: _t.isUpdateGjc,
        isUpdateRq: _t.isUpdateRq
      }
    },
    checkParam() {
      let _t = this;
      let tName = "[阿明-直通车-优化]"
      if (isNull(_t.bAccount)) {
        msg.error(tName + " 请填写店铺账号")
        return false;
      }
      if (isNull(_t.bPassword)) {
        msg.error(tName + "请填写店铺密码")
        return false;
      }
      if (!_t.isUpdateGjc && !_t.isUpdateRq) {
        msg.error(tName + " 修改关键词出价 和 修改人群溢价请至少选择一项")
        return false;
      }
      if (isNull(_t.markTemplateList)) {
        msg.error(tName + "请添加操作设置")
        return false;
      }
      let res = _t.markTemplateList.some((v, i) => {
        if (isNull(v.filterList)) {
          msg.error(tName + "请为 第[" + (i + 1) + "]列 操作设置添加筛选条件")
          return true;
        }
        for (let j = 0; j < v.filterList.length; j++) {
          if (isNull(v.filterList[j].field)) {
            msg.error(tName + "请填写 第[" + (i + 1) + "]列 " + "操作设置中的 第[" + (j + 1) + "]列的 条件字段")
            return true;
          } else if (isNull(v.filterList[j].comparator)) {
            msg.error(tName + "请填写 第[" + (i + 1) + "]列 " + "操作设置中的 第[" + (j + 1) + "]列的 判断字段")
            return true;
          } else if (isNull(v.filterList[j].value)) {
            msg.error(tName + "请填写 第[" + (i + 1) + "]列 " + "操作设置中的 第[" + (j + 1) + "]列的 值字段")
            return true;
          }
        }
      })
      return !(res);
    },
    /** 优化选项多选更新 */
    updateChange(value) {
      if (value.length === 0) {
        msg.warning("至少选择一项优化")
        this.options.selectUpdate = ['关键词出价', '人群溢价']
      }
      this.isUpdateGjc = value.includes("关键词出价") ? true : false
      this.isUpdateRq = value.includes("人群溢价") ? true : false
    }
  }
}
</script>

<style scoped>
.label {
  font-size: 15px;
  font-weight: bold;
  margin-right: 10px;
}

.container {
  display: flex;
  justify-content: flex-start; /* 将第一个子元素靠左对齐 */
  align-items: center; /* 将所有子元素垂直居中 */
}

.left {
  /* 可选：设置左侧子元素的样式 */
}

.right {
  margin-left: auto; /* 将右侧子元素靠右对齐 */
  /* 可选：设置右侧子元素的样式 */
}
</style>